<template>
    <modelPopup v-model:is-show="showModal" @confirm="confirm">
        <template #title>
            <div class="text-center">添加商家</div>
        </template>
        <template #content>
            <view class="w-full p-[20rpx]">
                <uni-forms :modelValue="formData" ref="formRef" :rules="formRules" :border="true">
                    <uni-forms-item label="名称" required name="name">
                        <uni-easyinput :inputBorder="false" v-model="formData.name" placeholder="请输入姓名" />
                    </uni-forms-item>
                    <uni-forms-item label="地址" required name="address">
                        <uni-easyinput :inputBorder="false" v-model="formData.address" placeholder="请输入商家地址" />
                    </uni-forms-item>
                    <uni-forms-item label="联系人" required name="contactName">
                        <uni-easyinput :inputBorder="false" v-model="formData.contactName" placeholder="请输入联系人" />
                    </uni-forms-item>
                    <uni-forms-item label="电话" required name="contactPhone">
                        <uni-easyinput :inputBorder="false" v-model="formData.contactPhone" placeholder="请输入电话" />
                    </uni-forms-item>
                </uni-forms>
            </view>
        </template>
    </modelPopup>
</template>

<script lang="ts" setup>
import { merchantAddApi } from "@/api/lucky";
import modelPopup from "@/components/popup/modal.vue";
import type { UniFormsInstance, UniFormsRules } from "@uni-helper/uni-types";
const showModal = ref(false);
const emits = defineEmits(["loadMerchantLists"]);
const open = () => {
    showModal.value = true;
};
const formRef = ref<UniFormsInstance>();
const formData = reactive({
    name: "",
    address: "",
    contactPhone: "",
    contactName: "",

})
const formRules = {
    name: {
        rules: [{
            required: true,
            errorMessage: '商家名称不能为空'
        }]
    },
    address: {
        rules: [{
            required: true,
            errorMessage: '地址不能为空'
        }]
    },
    contactPhone: {
        rules: [{
            required: true,
            errorMessage: '手机号不能为空'
        }]
    },
    contactName: {
        rules: [{
            required: true,
            errorMessage: '联系人不能为空'
        }]
    }


}
const confirm = async () => {
    await formRef.value?.validate?.()
    await merchantAddApi(formData)
    await uni.showToast({
        title: "添加成功",
        icon: "success"
    });
    showModal.value = false;
    emits("loadMerchantLists");
};
defineExpose({
    open
})
</script>
<style lang="scss" scoped></style>